import { onShow } from '@dcloudio/uni-app'
import { computed, watch } from 'vue';
import { useStore } from 'vuex';
export function useCartBadge() {
  const store = useStore();
  const total = computed(() => store.getters['cart/total']);
  
  // 数量被修改的时候要触发角标的变化
  watch(() => total.value, (newVal) => {
    const pagesList = getCurrentPages();
    const currentPage = pagesList[pagesList.length - 1].route; // 获取当前页面的路径
    const tabBarList = ['pages/home/home', 'pages/cate/cate', 'pages/cart/cart', 'pages/my/my']
    if(tabBarList.includes(currentPage)) {
      showBadge(newVal);
    }
  }, {
    immediate: true,
  })
  
  function showBadge(num) {
    // 值为0的时候移除角标，否则添加角标
    if(!num) {
      return uni.removeTabBarBadge({
        index: 2,
      })
    }
    uni.setTabBarBadge({
      index: 2,
      text: `${ num }`
    })
  }
  
  onShow(() =>{
    showBadge(total.value); // 一进页面，这个值是固定的，后面对商品数量进行修改或者在删除商品的时候，页面上的数据不会变
  })
}
  